<template>
  <div class="total-wrapper">
      <span class="total">{{ totalPrice }}</span>
      <span class="operation">
          <a @click="settle">结算</a>
      </span>
  </div>
</template>

<script>
export default {
    name: 'CartTotal',
    props: [ 'items' ],
    methods: {
        settle(){
            alert( '你是用支付宝还是用微信支付？' );
        }
    },
    computed: {
        totalPrice(){
            // 用来实现归并操作函数
            let reducer = (prev,curr) => prev + curr.price * curr.amount ;
            // 初始值
            let initial = 0 ;
            // 实现归并操作
            let total = this.items.reduce( reducer , initial );
            return total.toLocaleString('zh-CN',{ style: 'currency' , currency: 'CNY'});
        }
    }
}
</script>

<style scoped>
.total-wrapper{
    display: flex ;
    margin: 10px ;
    border: 1px solid green;
    line-height: 3rem;
}

.total{
    margin-left: 70%;
    flex-basis: 15%;
    text-align: center;
}

.operation { 
    flex-basis: 15%; 
}

.operation>a { 
    display: inline-block;
    height: 2rem;
    line-height: 2rem;
    padding: 0 0.5rem;
    font-size: 1rem;
    cursor: pointer; 
    color: #fff;
    background: blue; 
    user-select: none;
}
</style>